<template>
  <n-card content-style="padding: 10px;" header-style="padding: 10px;" footer-style="padding: 10px">
    <template #header>
      银行信息维护
    </template>
    <template #header-extra>
      <n-button circle>
        <template #icon>
          <n-icon>
            <i class="fa fa-refresh" />
          </n-icon>
        </template>
      </n-button>
    </template>
    <n-grid cols="1 s:2 m:3" responsive="screen" :y-gap="5" :x-gap="5" style="margin-bottom: 10px">
      <n-grid-item>
        <n-input-group>
          <n-input v-model:value="search.searchText" placeholder="请输入搜索内容"/>
          <n-button  ghost @click="loadBanks(0,10)">
            搜索
          </n-button>
        </n-input-group>
      </n-grid-item>
    </n-grid>
    <n-data-table
        :columns="columns"
        :data="dataResult"
        min-height="250px"
        :bordered="false"
    />
    <n-pagination @update:page="page.onChange" @update:page-size="page.onUpdatePageSize" v-model:page="page.page" :item-count="page.itemCount" :page-count="page.pageCount" :page-slot="7" style="justify-content: center;margin-top: 5px"/>
  </n-card>
</template>

<script>
import {h} from "vue";
import {NButton,NInput} from "naive-ui"
//import axios from "axios";
//import utils from "@/Utils";
export default {
  name: "MaintainOfBankTemplate",
  data(){
    return{
      search:{
        searchText:''
      },
      columns:[
        {
          title: "ID",
          key: "bankId"
        },
        {
          title: "银行名称",
          key: "bankName",
          width:300,
          render:this.readerBankName
        },
        {
          title: "Action",
          key: "actions",
          render:this.readerClickDelete
        }
      ],
      dataResult:[],
      page:{
        page: 1,
        pageSize: 10,
        itemCount:0,
        onChange: (page) => {
          console.log(page)
        this.loadBanks(page,this.page.pageSize)
      },
        onUpdatePageSize: (pageSize) => {
        this.loadBanks(this.page.page,pageSize)
      }
      }
    }
  },
  methods:{
    loadBanks:async function (index,size){
      await this.axios.post("/bank/selectBankByBankName",{
        searchText:this.search.searchText,
        pageIndex:index,
        pageSize:size
      }).then((res)=>{
        const data=res.data;
        this.dataResult=data.data.data;
        this.page.page=data.data.pageIndex;
        this.page.itemCount=data.data.itemCount;
        this.page.pageSize=data.data.pageSize;
        console.log(this.dataResult)
      })
    },
    readerBankName:function (row){
      const _this=this;
      return h(NInput, {
        value: row.bankName,
        autosize:true,
        onUpdateValue(v) {
          row.bankName=v;
        },
        onBlur:()=>{
          console.log("当前失去焦点")
          let time;
          if (time) clearTimeout(time);
          time=setTimeout( function (){
            _this.axios.post("/bank/updateBankNameById",{
              bankId:row.bankId,
              bankName:row.bankName
            }).then((res)=>{
              const data=res.data;
              let msg;
              if (data.code>0){
                msg=data.error;
              }else{
                msg=data.data;
              }
              if (_this.$utils.tipsOption(data.code, data.status, msg)) {
                return;
              }
              _this.loadBanks(0,10)
            })
          },500)
        }
      });
    },
    readerClickDelete:function (row){
      const _this=this;
      return h(NButton, {
        size: "small",
        onClick:()=>{
          _this.axios.post("/bank/deleteBankByIdAndName",{
            bankId:row.bankId,
            bankName:row.bankName
          }).then((res)=>{
            const data=res.data;
            let msg;
            if (data.code>0) {
              msg=data.error;
            }else {
              msg=data.data;
            }
            if (_this.$utils.tipsOption(data.code, data.status, msg)) {
              return
            }
            _this.loadBanks(0,10)
          })
        }
      }, { default: () => "删除" });
    }

  },
  mounted() {
    this.loadBanks(0,10);
  }
}
</script>

<style scoped>

</style>